<template>
	<view class="">
		<view style="background-color: #fff;">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<u-card :show-head="false" :border="false" :head-style="{fontWeight:700}" :head-border-bottom="false"
			:foot-border-top="false" :body-style="{padding:'0 30rpx'}" :foot-style="{padding:'10rpx 30rpx'}"
			@click="openSkip(item)">
			<view slot="body">
				<view class="u-body-item u-flex u-border-bottom mt-20 pb-20 body-box">
					<u-image width="300rpx" height="150rpx"  src="https://picsum.photos/150"></u-image>
					<view class="u-body-item-right ml-20">
						<view  style="color: black;font-weight: 700;">测试活动</view>
						<view style="color: #2979ff" class="mt-20">已报名0人</view>
					</view>
				</view>
			</view>
			<view class="" slot="foot">
				<view class="info">
					<view class="info-left">
						<text>截止时间：不限</text>
					</view>
					<view class="info-right">
						<u-button type="primary" :custom-style="customStyle">去参与</u-button>
					</view>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					borderRadius: '50rpx',
					textAlign: 'center',
					padding: '0 20rpx',
					height: '50rpx'
				},
				show: false,
				list: [{
					name: '进行中'
				}, {
					name: '已参与'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			openAddPlate() {
				uni.navigateTo({
					url: '/subPack/addPlate'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body-box {
		display: flex;
	}

	.u-body-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>